import "./index.css";

import ThemeContext, { ThemeProvider } from "../ThemeContext";

import ChildComp1 from "./ChildComp1";
import ThemeChanger from "./ThemeChanger";
import { useContext } from "react";

const MainView = () => {
  const { theme } = useContext(ThemeContext);
  return (
    <div className={`ProviderContainer BrownBorder ${theme}`}>
      <h1>useContext</h1>
      <div>Demo7</div>
      <div>Theme: {theme}</div>
      <ThemeChanger />
      <ChildComp1 />
    </div>
  );
};

const Demo7 = () => {
  return (
    <ThemeProvider>
      <MainView />
    </ThemeProvider>
  );
};

export default Demo7;
